<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="/element/css/index.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <script src="/element/js/vue.js"></script>
    <script src="/element/js/index.js"></script>
    <script src="/js/jquery-1.12.1.min.js"></script>
    <script src="/js/common.js" charset="utf-8"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div id="app">
            <div>
                <el-descriptions title="表信息" :column="4" border size="medium">
                    <el-descriptions-item label="模型名称">{{name}}</el-descriptions-item>
                    <el-descriptions-item label="表名称">{{tableName}}</el-descriptions-item>
                    <el-descriptions-item label="模型描述">{{descNote}}</el-descriptions-item>
                </el-descriptions>
            </div>
            <br>
            <hr>
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-primary" @click="save">保存</button>
                <button type="button" class="layui-btn layui-btn-normal" @click="add">增加</button>
                <button type="button" class="layui-btn layui-btn-danger" @click="del">删除</button>
            </div>

            <table class="layui-table" lay-size="sm">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th>字段名称</th>
                    <th>字段类型</th>
                    <th>长度</th>
                    <th>小数点</th>
                    <th>不是空</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody v-for="item in tableData">
                <tr>
                    <td><el-input v-model=item.fieldName  placeholder="请输入字段名称" size="small" ></el-input></td>
                    <td>
                        <el-select  v-model=item.fieldType placeholder="请选择字段类型"  v-on:input="onEvent($event,item)"  size="small">
                            <el-option v-for="select in selectList"  :label=select.name :value=select.fieldType></el-option>
                        </el-select>
                    </td>
                    <td><el-input v-model=item.fieldLength  placeholder="请输入长度" size="small" :max="item.fieldMaxLength"  v-on:input="onEventMaxLenth($event,item)"></el-input></td>
                    <td><el-input v-model=item.pointLength :disabled="item.isPoint" placeholder="请输入小数点" size="small" ></el-input></td>
                    <td>
                        <el-switch
                                v-model="item.isNull"
                                active-color="#13ce66">
                        </el-switch>
                    </td>
                    <td><el-input  type="text" v-model=item.fieldDesc  size="small" ></el-input></td>
                </tr>
                </td>
                </tbody>
            </table>

        </div>

    </div>
</div>

<script>
    var Main = {
        data() {
            return {
                tableName:"",
                name:"",
                descNote:"",
                tableData: [{
                    fieldName:"",
                    fieldType:"varchar",
                    fieldDesc:"备注",
                    fieldLength:255,
                    fieldMaxLength:255,
                    isPoint:true,
                    pointLength:null,
                    isNull:false
                }],
                selectList:[]
            }
        },
        created(){
            this.init();
            this.getFieldType();
        },
        methods: {
            init(){
                var url = decodeURI(window.location.href);
                var argsIndex = url.split("?obj=");
                var tableName = argsIndex[1];
                var name = argsIndex[2];
                var descNote = argsIndex[3];
                this.tableName=tableName;
                this.name = name;
                this.descNote = descNote;
                console.log(tableName+" "+name+" "+descNote)
            },
            add(){
                let obj=this.gettable();
                this.tableData.push(obj)
            },
            onEvent(obj,res){
                let list=this.selectList;
                for (let i = 0; i < list.length; i++) {
                    let re=list[i];
                    if(re.fieldType===obj){
                        res.fieldLength=re.fieldLength;
                        res.isPoint=!re.isPoint;
                        res.fieldMaxLength=re.fieldLength;
                    }
                }
                console.log(obj,res)
            },
            //获取字段类型
            getFieldType(){
                let list=api.getFieldType();
                this.selectList=list.data;
            },
            save(){
                let obj={};
                obj.tableName=this.tableName;
                obj.name=this.name;
                obj.descNote=this.descNote;
                obj.tableModelConfigs=this.tableData;
                let res=api.saveTable(obj);
                this.$message(res.msg);
            },
            gettable(){
                let obj={};
                obj.fieldName="",
                obj.fieldType="varchar",
                obj.fieldDesc="备注",
                obj.fieldLength=255,
                obj.fieldMaxLength=255,
                obj.isPoint=true,
                obj.pointLength=null,
                obj.isNull=false
                return obj;
            },
            del(){
                this.tableData.pop();
            },
            onEventMaxLenth(obj,res){
                if(obj<0){
                    res.fieldLength=0
                }
                if(obj>res.fieldMaxLength){
                    res.fieldLength=res.fieldMaxLength;
                }
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>